<template>
	<view class="root oh">
		<view class="header">
			<view class="mt-30 f1 jc-center ai-center">
				<image
					class="avatar br-circle"
					:src="
						userInfo.avatarUrl ||
						'/static/images/default-avatar.png'
					"
					mode="aspectFill"
					@click="previewAvatar(userInfo.avatarUrl)"
				/>
				<text class="lh-2 color-fff fs-30">
					{{ userInfo.nickName || "--" }}
				</text>
			</view>

			<navigator
				url="/pages/income/withdrawal"
				class="income fd-row ai-center jc-sb color-fff br-4"
			>
				<text class="fs-28">我的收益</text>
				<text class="fs-36">￥{{ userInfo.balance || "0.00" }}</text>
				<label>
					<text class="fs-28">提现</text>
					<uni-icons color="#fff" type="arrowright" />
				</label>
			</navigator>
		</view>

		<view class="main f1 oh bgc-fff">
			<view class="navigation fd-row jc-sa bgc-fff">
				<label
					v-for="(nav, index) in navigation"
					:key="index"
					:class="[
						{ active: navIndex === index },
						'fs-28',
						'color-999',
						'lh-2',
						'relative',
					]"
					@click="switchNav(index)"
				>
					{{ nav }}
				</label>
			</view>
			<view v-if="navIndex" class="ai-center">
				<view class="choose-section fd-row mt-40">
					<button
						v-for="(section, index) in sections"
						:key="index"
						@click="sectionIndex = index"
						:class="[
							{ active: sectionIndex === index },
							'color-999',
							'br-20',
							'fs-24',
							'lh-1',
						]"
					>
						{{ section }}
					</button>
				</view>
				<u-charts
					v-if="charts.length"
					ref="charts"
					chartType="line"
					:opts="charts[sectionIndex]"
					@changeData="changeData"
				/>
			</view>

			<scroll-view
				v-else
				@scrolltolower="getData"
				:scroll-y="true"
				class="f1 oh"
			>
				<view
					v-for="(item, index) in incomes.list"
					:key="index"
					class="bb-eee fd-row ai-center jc-sb pt-30 pb-30 ml-30 mr-30"
				>
					<label>
						<image
							class="width-100 height-100 br-circle bgc-eee"
							:src="
								item.avatarUrl ||
								'/static/images/default-avatar.png'
							"
							mode="aspectFill"
						/>
						<view class="ml-22">
							<text class="fs-28 color-1B1B1B">
								{{
									`${item.nickName || "--"} ${
										item.items || "--"
									}`
								}}
							</text>
							<text class="fs-24 color-1B1B1B">
								订单编号：{{ item.sn || "--" }}
							</text>
							<text class="fs-24 color-999">
								{{ item.add_time || "--" }}
							</text>
						</view>
					</label>

					<text class="color-ff4a5b fs-28">
						{{ item.user_money || "+ 0.00" }}
					</text>
				</view>

				<uni-load-more :status="loadStatus" />
			</scroll-view>
		</view>
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniIcons from "../../components/uni-icons/uni-icons.vue";
	import uCharts from "../../components/u-charts/component.vue";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import { Storage } from "@/libs/utils";
	import { Pager } from "@/common/type";

	let requestFlag: boolean = false;

	@Component({
		components: { uniIcons, uCharts, uniLoadMore },
		watch: {
			sectionIndex(val) {
				(this.$refs.charts as AnyObject).changeData(this.$data.charts[val]);
			},
		},
	})
	export default class income extends Vue {
		// component property
		userInfo: AnyObject = {};
		loadStatus: string = "loading";

		navigation: string[] = ["收益记录", "交易流水"];
		navIndex: number = -1;

		sections: string[] = ["本周", "本月"];
		sectionIndex: number = 0;

		incomes: Pager<AnyObject> = {
			list: [],
			page: 1,
		};

		charts: [] = [];

		onNavigationBarButtonTap(e: AnyObject) {
			if (e.float !== "right") return;
			uni.navigateTo({ url: "/pages/income/setting" });
		}

		onShow() {
			this.userInfo = Storage.get("userInfo");
			this.switchNav(0);
		}

		switchNav(index: number) {
			if (this.navIndex === index) return;
			this.navIndex = index;
			this.incomes = { list: [], page: 1 };
			this.getData();
		}

		getData() {
			if (!this.navIndex && (requestFlag || !this.incomes.page)) return;

			!this.navIndex && (this.loadStatus = "loading");
			requestFlag = true;
			this.request
				.get("/employee/wallet", {
					type: this.navIndex,
					page: this.incomes.page,
				})
				.then(({ data }) => {
					const { balance, accountList, transactionFlow } = data;

					balance &&
						(this.userInfo = Storage.update("userInfo", { balance }));

					transactionFlow && (this.charts = transactionFlow);

					if (accountList) {
						this.incomes.page = +accountList.page;
						this.incomes.list.push(...accountList.list);
						this.loadStatus = +accountList.page ? "more" : "noMore";
					}

					requestFlag = false;
				});
		}

		previewAvatar(url: string) {
			uni.previewImage({ urls: [url] });
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	// scss
	.root {
		height: 100%;
		.header {
			background-image: linear-gradient(-90deg, #1ba0ff, #2857ff);
			.avatar {
				width: 138rpx;
				height: 138rpx;
			}
			.income {
				margin: 50rpx 30rpx 80rpx;
				padding: 30rpx;
				background-color: rgba(255, 255, 255, 0.3);
			}
		}
		.main {
			margin-top: -50rpx;
			border-radius: 30rpx 30rpx 0 0;

			.navigation {
				padding: 30rpx;
				z-index: 9;
				.active {
					color: #1b1b1b;
					&::after {
						content: "";
						position: absolute;
						width: 70%;
						height: 6rpx;
						background-color: #1c9dff;
						border-radius: 3rpx;
						bottom: 0;
						left: 15%;
					}
				}
			}

			.choose-section {
				button {
					margin: 0 20rpx;
					border: 1rpx solid #dcdcdc;
					padding: 8rpx 16rpx;
					&.active {
						color: #1c9dff;
						border: 1rpx solid #1c9dff;
					}
				}
			}

			.bb-eee {
				border-bottom: 1rpx solid #eee;
			}
		}
	}
</style>